<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Coins</title>
    <style>
      * {
        margin: 0;
      }
      html,
      body {
        width: 100vw;
        height: 100vh;
        background: black;
      }
      canvas {
        margin: 0 auto;
        display: block;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      class Particle {
        constructor(x, y, size, img) {
          this.x = x;
          this.y = y;
          this.size = size;
          this.img = new Image();
          this.img.src = img;
          this.speedX = 0;
          this.speedY = 0;
        }

        update() {
          this.speedX = orientation.gamma / 15;
          this.speedY = orientation.beta / 15;
          if (
            (this.speedX > 0 && this.x >= canvas.width - this.size / 2) ||
            (this.speedX < 0 && this.x <= this.size / 2)
          ) {
            this.speedX = 0;
          }
          if (
            (this.speedY > 0 && this.y >= canvas.height - this.size / 2) ||
            (this.speedY < 0 && this.y <= this.size / 2)
          ) {
            this.speedY = 0;
          }
          this.x += this.speedX;
          this.y += this.speedY;
        }

        draw() {
          ctx.drawImage(
            this.img,
            this.x - size / 2,
            this.y - size / 2,
            this.size,
            this.size
          );
        }
      }
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const coins = [];
      const size = 100;
      const img = 'coin.png';
      let touchCoin = null;
      const orientation = {
        alpha: null,
        beta: null,
        gamma: null,
      };
      canvas.addEventListener('click', function (event) {
        if (
          orientation.alpha === null &&
          orientation.beta === null &&
          orientation.gamma === null
        ) {
          function handleOrientation(event) {
            orientation.alpha = event.alpha;
            orientation.beta = event.beta;
            orientation.gamma = event.gamma;
          }
          if (window.DeviceOrientationEvent.requestPermission) {
            window.DeviceOrientationEvent.requestPermission().then((state) => {
              if (state === 'granted') {
                window.addEventListener('deviceorientation', handleOrientation);
              } else if (state === 'denied') {
                console.error('用户拒绝', state);
              } else if (state === 'prompt') {
                console.error('用户干了啥', state);
              }
            });
          } else {
            window.addEventListener('deviceorientation', handleOrientation);
          }
        }
      });
      canvas.addEventListener('click', function (event) {
        if (
          event.x <= size / 2 ||
          event.y <= size / 2 ||
          event.x >= canvas.width - size / 2 ||
          event.y >= canvas.height - size / 2 ||
          coins.some(
            (item) =>
              Math.sqrt(
                Math.pow(event.x - item.x, 2) + Math.pow(event.y - item.y, 2)
              ) <= size
          )
        ) {
          return;
        }
        coins.push(new Particle(event.x, event.y, size, img));
      });
      canvas.addEventListener('touchstart', function (event) {
        touchCoin = coins.find(
          (item) =>
            Math.sqrt(
              Math.pow(event.touches[0].clientX - item.x, 2) +
                Math.pow(event.touches[0].clientY - item.y, 2)
            ) <=
            size / 2
        );
        event.stopPropagation();
        event.defaultPrevented();
      });
      canvas.addEventListener('touchmove', function (event) {
        if (touchCoin) {
          touchCoin.x = event.touches[0].clientX;
          touchCoin.y = event.touches[0].clientY;
        }
        event.stopPropagation();
        event.defaultPrevented();
      });
      canvas.addEventListener('touchend', function (event) {
        touchCoin = null;
        event.stopPropagation();
        event.defaultPrevented();
      });
      (function animate() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < coins.length; i++) {
          const particle = coins[i];
          particle.update();
          particle.draw();
        }
        requestAnimationFrame(animate);
      })();
    </script>
  </body>
</html>
